import { LikeOutlined, MessageOutlined, StarOutlined } from "@ant-design/icons";
import { ProList } from "@ant-design/pro-components";
import { Button, Tag } from "antd";

import React from "react";

const ListPage: React.FC = () => {
  const dataSource = [
    {
      id: 1,
      title: "React 18 新特性介绍",
      content:
        "React 18 带来了许多激动人心的新特性，包括并发渲染、自动批处理等...",
      avatar:
        "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
      status: "published",
      tags: ["React", "前端"],
    },
    {
      id: 2,
      title: "TypeScript 最佳实践",
      content: "TypeScript 作为 JavaScript 的超集，提供了强大的类型系统...",
      avatar:
        "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
      status: "draft",
      tags: ["TypeScript", "编程"],
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <h1>文章列表</h1>
      <ProList
        dataSource={dataSource}
        metas={{
          title: {
            dataIndex: "title",
          },
          avatar: {
            dataIndex: "avatar",
          },
          description: {
            dataIndex: "content",
          },
          actions: {
            render: () => [
              <Button key="like" type="text" icon={<LikeOutlined />}>
                点赞
              </Button>,
              <Button key="comment" type="text" icon={<MessageOutlined />}>
                评论
              </Button>,
              <Button key="star" type="text" icon={<StarOutlined />}>
                收藏
              </Button>,
            ],
          },
          extra: {
            render: (_, record) => (
              <div>
                {record.tags.map((tag: string) => (
                  <Tag key={tag} color="blue">
                    {tag}
                  </Tag>
                ))}
                <Tag color={record.status === "published" ? "green" : "orange"}>
                  {record.status === "published" ? "已发布" : "草稿"}
                </Tag>
              </div>
            ),
          },
        }}
      />
    </div>
  );
};

export default ListPage;
